<template>
	<view>
		<view>生命周期、导航跳转学习</view>
		<!-- 声明式导航 -->
		<!-- 传参 -->
		<navigator url="/pages/detail/detail?id=800&name=huathy">详情页面(带参)(保留上次的页面)</navigator>
		<navigator url="/pages/detail/detail" open-type="redirect">详情页（不保留上次页面）</navigator>
		<navigator url="/pages/msg/msg" open-type="switchTab">跳转至信息页面</navigator>
		<!-- 编程式导航 -->
		<button type="default" @click="goDetail">详情页(带参)</button>
		<button type="default" @click="goMsg">信息页</button>
		<button type="default" @click="goImg">img页并关闭当前页</button>
		<navigator url="/pages/content/content">内容页面</navigator>
		<navigator url="/pages/btn/btn">按钮页面</navigator>
		<navigator url="/pages/img/img">img图片页面</navigator>
		<navigator url="/pages/uni-style/uni-style">uni-style样式页面</navigator>
		<navigator url="/pages/uni-data/uni-data">uni-data数据绑定页面</navigator>
		<navigator url="/pages/uni-net/uni-net">uni-net网络请求页面</navigator>
		<navigator url="/pages/uni-event/uni-event">uni-event事件绑定页面</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad(op) {	//可以从上一级页面获取到参数
			console.log("index页面加载",op);		//触发一次
		},
		onShow() {
			console.log('页面显示了..');
		},
		onReady() {	//只会触发一次
			console.log('页面初次渲染完成..');
		},
		onHide() {
			console.log("页面隐藏了..");
		},
		onUnload() {
			console.log("首页已被卸载...");
		},
		methods: {
			goDetail(){
				uni.navigateTo({
					url: '/pages/detail/detail?id=800&name=huathy'
				})
			},
			goMsg(){
				uni.switchTab({		//跳转至tabbar页面并关闭所有非tabbar页面
					url: "/pages/msg/msg"
				})
			},
			goImg(){
				uni.redirectTo({
					url: "/pages/img/img"
				})
			}
		}
	}
</script>

<style scoped>
	/deep/ navigator{
		border: #4CD964 !important;
		color: #aa0000;
		padding: 6px;
		background-color: #999999;
	}
</style>
